<template>
  <div class="main">
    <div class="createTeastWrap flex-h">
      <div class="toper">
        <div class="top" @click="abss" v-hide>
          <i class="imgIcon"></i>
        </div>
      </div>
      <div class="testBoxWrap flex1">
        <div class="testWrap">
          <div class="textbox">
            <!-- 职业兴趣测试 -->
            <div v-if="types == 1">
              <zyxq-test></zyxq-test>
            </div>
            <div v-if="types == 2">
              <zyjzg-test></zyjzg-test>
            </div>
            <div v-if="types == 3">
              <mbti-test></mbti-test>
            </div>
            <div v-if="types == 4">
              <dyzn-test></dyzn-test>
            </div>
            <div v-if="types == 5">
              <grown-test></grown-test>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <confirm v-model="show" @on-confirm="onConfirm">
        <p style="text-align:center;">您的题目尚未做完，退出将不会保存已做题目，您确定要退出吗？</p>
      </confirm>
    </div>
  </div>
</template>
<script>
import ls from 'store2'
import { Confirm, TransferDomDirective as TransferDom } from 'vux'
import goBack from '~/components/goBack'
import zyxqTest from './components/zyxqTest'
import zyjzgTest from './components/zyjzgTest'
import mbtiTest from './components/mbtiTest'
import dyznTest from './components/dyznTest'
import grownTest from './components/grownTest'

export default {
  head: {
    title: '生涯测评',
  },
  directives: {
    TransferDom,
  },
  components: {
    goBack,
    zyxqTest,
    zyjzgTest,
    dyznTest,
    grownTest,
    mbtiTest,
    Confirm,
  },
  created() {
    this.types = ls.get('testTypes') * 1
  },
  data() {
    return {
      types: 0,
      tabNum: 0,
      total: 100,
      show: false,
    }
  },
  mounted: function() {
    this.$visit(this.$route.path)
    switch (this.types) {
      case 1:
        this.total = 182
        break
      case 2:
        this.total = 60
        break
      case 3:
        this.total = 70
        break
      case 4:
        this.total = 88
        break
      case 5:
        this.total = 10
        break
      default:
        this.total = 'C型(事务型)'
    }
  },
  watch: {},
  methods: {
    onConfirm(msg) {
      this.commonJs.gosto('../evaluation/createTest')
    },
    abss() {
      this.show = true
    },
  },
}
</script>

<style scoped lang="less">
.top {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.3rem;
  box-sizing: border-box;

  .imgIcon {
    width: 0.4rem;
    height: 0.4rem;
    display: inline-block;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
    background-size: 3rem 2.4rem;
  }
}

.createTeastWrap {
  width: 7.5rem;
  height: 100vh;
  background: rgba(250, 250, 250, 1);
  overflow: hidden;
  flex-direction: column;

  .toper {
    width: 100%;
    height: 0.8rem;
  }

  .testBoxWrap {
    width: 7.5rem;
    height: 100%;

    .testWrap {
      width: 6.9rem;
      height: 99.5%;
      position: relative;
      background: rgba(255, 255, 255, 1);
      // background: red;
      box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
      margin: 0rem auto 0;
      z-index: 2;
      border-radius: 0.2rem;

      .textbox {
        width: 100%;
        height: auto;
        padding: 0.3rem 0.4rem;
        box-sizing: border-box;

        .titlesDrag {
          width: 100%;
          height: 0.8rem;
          margin-top: 0.5rem;

          .sp1,
          .sp2 {
            font-size: 0.26rem;
            font-weight: bold;
            box-sizing: border-box;
            height: 0.8rem;
          }

          .sp1 {
            width: 1.5rem;
            padding-top: 0.4rem;
            color: @mainColor;
          }

          .sp2 {
            padding-top: 0.2rem;

            color: rgba(187, 187, 187, 1);
          }
        }

        .titlesDrag1 {
          height: 0.4rem;
          margin-top: 0;
          font-size: 0.3rem;

          .sp1,
          .sp2 {
            height: 0.4rem;
            padding-top: 0;
            color: rgba(187, 187, 187, 1);
          }
        }
      }
    }
  }
}
</style>
